<template>
  <div id="wrapper">
    <div class="search">
    <a-input-search placeholder="input search text" enter-button @search="onSearch" />
  <table >
         <thead>

         <th style="width:100px ;height:150px">书名</th>
         <th style="width:100px ;height:150px" >作者</th>
         <th style="width:100px ;height:150px">封面</th>
         <th style="width:100px ;height:150px">介绍</th>


         </thead>
       <tbody v-for="(item,index) in book" :key="index" style="border:1px solid grey"  >


         <td>{{item.bookInfo.title}}</td>
         <td>{{item.bookInfo.author}}</td>
         <td ><img :src="item.bookInfo.cover"/></td>
         <td>{{item.bookInfo.intro}}</td>


       </tbody>
    </table>

    </div>


  </div>
</template>

<script>





  export default {
    name: 'landing-page',
    data(){
      return{
         book:[],



      }
    },

    methods: {


         async onSearch(value){
           console.log(value)
             let res = await this.$http.get('https://weread.qq.com/web/search/global?maxIdx=0&fragmentSize=120&count=40&keyword='+value)

            this.book = res.data.books
              console.log(res)
              console.log(this.book)



            }
    },

  }
</script>

<style lang="scss" scoped>

</style>>



